<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<template>
	<view class="content">

		<z-paging ref="paging" class="paging" v-model="infoArr" @query="queryList" :fixed="false" :auto="false">

			<view class="viewBox">
				<view v-for="(item,index) in infoList" class="itemView">
					<view @click="itemClick(index)" class="view"
						:class="[index==0 ? 'view1' : '',index==1 ? 'view2' : '',index==2 ? 'view3' : '']">
						<image :src="item.icon" style="width: 40rpx;height: 40rpx;margin-left: 24rpx;"></image>
						<text class="title">{{item.name}}</text>
						<image src="../../static/right.png" style="width: 38rpx;height: 38rpx;margin-right: 16rpx;">
						</image>
					</view>
					<view class="line"></view>
					<view v-for="(infoItem,infoIndex) in item.itemList" v-if="infoIndex < 2"
						style="display: flex;flex-direction: column;" @click="infoItemclick(infoItem)">
						<view class="contentText">{{infoItem.Title}}</view>
						<view class="time">
							<text style="color: #999999;flex: 1;">{{infoItem.CreateTime}}</text>
							<image src="../../static/eye.png" style="width: 30rpx;height: 21rpx;"></image>
							<text style="color: #9C9C9C;margin-left: 6rpx;">{{infoItem.ViewCount}}</text>
						</view>
					</view>

				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		GetListNews
	} from "../../common/api.js"
	export default {
		data() {
			return {

				infoList: [{
					name: '法律法规',
					icon: '/static/fa.png',
					itemList: []
				}, {
					name: '政策文件',
					icon: '/static/xing.png',
					itemList: []
				}, {
					name: '定额标准',
					icon: '/static/san.png',
					itemList: []
				}],

				infoArr: [],
				firstLoaded: false,
			}
		},
		props: {
			//当前组件的index，也就是当前组件是swiper中的第几个
			tabIndex: {
				type: Number,
				default: function() {
					return 0
				}
			},
			//当前swiper切换到第几个index
			currentIndex: {
				type: Number,
				default: function() {
					return 0
				}
			},

			searchParam: {
				type: String,
				default: function() {
					return ''
				}
			},

			isLoading: {
				type: Number,
				default: function() {
					return 0
				}
			},
		},
		watch: {
			currentIndex: {
				handler(newVal) {
					if (newVal === this.tabIndex) {
						//懒加载，当滑动到当前的item时，才去加载
						if (!this.firstLoaded) {
							this.$nextTick(() => {
								this.$refs.paging.reload();
							})
						}
					}
				},
				immediate: true
			},

			searchParam: {
				handler(newVal) {
					this.$nextTick(() => {
						this.$refs.paging.reload();
					})
				},
				immediate: true
			},
			
		},

		onLoad() {

		},
		
		methods: {
			//轮播图
			change(e) {
				this.current = e.detail.current
			},

			infoItemclick(item) {
				uni.navigateTo({
					url: '/pages/Home/Details/Details?item=' + encodeURIComponent(JSON.stringify(item))
				})
				
				setTimeout(() => {
					item.ViewCount++
				},500)
			},

			async queryList(pageNo, pageSize) {
				var that = this
				var data = {
					Title: this.searchParam,
					zltype: '1',
					page: pageNo,
					size: pageSize
				}
				let res = await GetListNews(data)
				that.infoList[0].itemList = res.response.data
				this.$refs.paging.complete(this.infoList);
				this.firstLoaded = true;
				this.queryList2()
			},

			async queryList2() {
				var that = this
				var data = {
					Title: this.searchParam,
					zltype: '2',
					page: 1,
					size: 10
				}
				let res = await GetListNews(data)
				that.infoList[1].itemList = res.response.data

				this.queryList7()
			},
			
			async queryList7() {
				var that = this
				var data = {
					Title: this.searchParam,
					zltype: '7',
					page: 1,
					size: 10
				}
				let res = await GetListNews(data)
				that.infoList[2].itemList = res.response.data

			},


			itemClick(index) {
				console.log("****itemClick", index)
				switch (index) {
					case 0:
						uni.navigateTo({
							url: '/pages/Home/LawsRegulations/LawsRegulations'
						})
						break;
					case 1:
						uni.navigateTo({
							url: '/pages/Home/PolicyPaper/PolicyPaper'
						})
						break;
					case 2:
						uni.navigateTo({
							url: '/pages/Home/QuotaStandard/QuotaStandard'
						})
						break;
				}
			}
		}
	}
</script>

<style scoped>
	.content {
		flex: 1;
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
		background-color: #f4f4f4;
	}

	.paging {
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
	}

	.viewBox {
		display: flex;
		flex-direction: column;
		margin-left: 24rpx;
		margin-right: 24rpx;

	}

	.itemView {
		width: 100%;
		height: auto;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 25rpx;
	}

	.view {
		width: 100%;
		height: 100rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-radius: 16rpx;
	}

	.view1 {
		background: linear-gradient(180deg, #FFE6DC 0%, rgba(255, 230, 220, 0) 100%);
	}

	.view2 {
		background: linear-gradient(180deg, #DDF7FF 0%, rgba(221, 247, 255, 0) 100%);
	}

	.view3 {
		background: linear-gradient(180deg, #E1FCDD 0%, rgba(219, 255, 213, 0) 100%);
	}

	.line {
		width: 100%;
		height: 1rpx;
		background: #EEEEEE;
	}

	.title {
		font-size: 34rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 48rpx;
		margin-left: 16rpx;
		flex: 1;
	}

	.time {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		line-height: 33rpx;
		display: flex;
		flex-direction: row;
		margin-top: 16rpx;
		margin-bottom: 25rpx;
		margin-left: 24rpx;
		margin-right: 24rpx;
		align-items: center;
	}

	.contentText {
		width: 646rpx;
		height: auto;
		/*高度自动*/
		display: inline-block;
		/*转为行内块元素*/
		white-space: pre-wrap;
		/*处理元素内的空白,保留空白符序列，但是正常地进行换行*/
		word-wrap: break-word;
		/*允许长单词或 URL 地址换行到下一行,在长单词或 URL 地址内部进行换行*/
		margin-top: 24rpx;
		font-size: 34rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 48rpx;
		margin-left: 24rpx;
	}
</style>
